<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery.easing.js"></script>
<script src="09_scrollMenu.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	background: #545454;
}

.wrap {
	width: 950px;
	margin: 0 auto;
	padding-bottom: 400px;
}

#top_menu {
	position: fixed;
	width: 950px;
	height: 114px;
	margin: 0 auto;
	text-align: center;
	top: 0px;
	background: #545454;
}

#top_menu ul {
	float: right;
	margin-right: 33px;
}

#top_menu ul li {
	padding: 59px 0px 0px 63px;
	float: left;
	list-style: none;
	color: #CCCCCC;
}

#top_menu ul li a {
	color: #fff;
	text-decoration: none;
}

#top_menu ul li.on a {
	color: #000;
	font-weight: bold;
}

#logo {
	float: left;
	width: 125px;
	padding-top: 40px;
	color: #FFFFFF;
}

#contents {
	
}

#contents div {
	padding-top: 114px;
}

#paper {
	width: 100%;
	height: 650px;
	background: #00BAFF;
}

#works {
	width: 100%;
	height: 650px;
	background: #00BAFF;
}

#email {
	width: 100%;
	height: 700px;
	background: #FFE200;
}
</style>

<div class="wrap">
	<div id="top_menu">
		<div id="logo">
			<a href="#home"><img src="img/logoPaper.png" alt="Paper" /></a>
		</div>
		<ul>
			<li class="on"><a href="#works">paper</a></li>
			<li><a href="#company">works</a></li>
			<li><a href="#email">email</a></li>
		</ul>
	</div>
	<div id="contents">
		<div id="paper">
			<img src="img/paper.jpg" alt="paper" />
		</div>
		<div id="works">
			<img src="img/work.jpg" alt="works" />
		</div>
		<div id="email">
			<img src="img/email.jpg" alt="email" />
		</div>
	</div>
</div>